<template>
	<view class="container">
		<view class="goods">
			<view class="name">
				<label class="left">商品名称：</label>
				<input class="right" placeholder="商品名称" v-model="formData.name" />
			</view>
			<view class="description">
				<label class="left">商品描述：</label>
				<textarea class="right" placeholder="商品描述" maxlength="300" v-model="formData.goods_description">
				</textarea>
			</view>

			<view class="tagsO">
				<view class="tags">
					<label class="left">种类：</label>
					<input class="right" placeholder="种类(多个种类逗号分割)" v-model="tagTemp" />

					<view @click="addTag"
						style="width: 100px;margin-left: 10rpx;background-color:#094563;border-radius: 8px;text-align: center;padding: 10rpx;">
						<text style="color:#fff">添加</text>
					</view>
				</view>
				<view v-for="(tag,index) in tags "
					style="display: inline-block;margin:10rpx;border: 1px solid #926b6a;padding: 10rpx;border-radius: 8px;position: relative;">
					<label style="color: #926b6a;">{{tag}}</label>
					<icon @click="deleteTag(index)" type="clear" size="2"
						style="position: absolute;top: -5px;right: 2px;"></icon>
				</view>

			</view>

			<view class="price">
				<label class="left">价格：</label>
				<input class="right" placeholder="价格" type="digit" v-model="formData.price" />
			</view>

			<view class="address">
				<label class="left">地址：</label>
				<view style="display: flex;align-items: flex-start;flex-direction: column;">
					<view style="display: flex;align-items: center;margin-top: 10rpx;">
						<input class="right" placeholder="" style="width: 100px;" v-model="address[0]" />
						<span>省</span>
						<input class="right" placeholder="" style="margin-left: 20rpx;width: 100px;"
							v-model="address[1]" />
						<span>市</span>
					</view>
					<view style="display: flex;align-items: center;margin-top: 10rpx;">
						<input class="right" placeholder="" style="width: 150px;" v-model="address[2]" />
						<span>区</span>
					</view>
					<input class="right" style="display: block;margin-top: 10rpx;" placeholder="详细地址"
						v-model="address[3]" />
				</view>
			</view>

			<view class="call_way">
				<label>联系方式：</label>
				<view class="call_way_in" v-for="(item,index) in call_ways" :key="index">
					<label class="left">{{item.way+":"}}</label>
					<input class="right" v-model="item.value" />
				</view>
			</view>

			<view class="chooseImageView">
				<uni-file-picker style="" ref="files" v-model="imageValue" fileMediatype="image" mode="grid"
					@select="selectFile" @delete="deleteFile" :limit="6" />
			</view>
		</view>



		<view>
			<custBtn btnName="提交" @click.native="submitGoodsInfo"></custBtn>
		</view>

	</view>
</template>

<script>
	import custBtn from '@/components/cust_btn.vue'
	import {
		updateGoodsInfo,findGoodsById,showImage
	} from '@/apis/controll';
	export default {
		components: {
			custBtn
		},
		data() {
			return {
				call_ways: [{
					way: '邮箱',
					value: '',
				}, {
					way: 'QQ',
					value: '',
				}, {
					way: '微信',
					value: '',
				}, {
					way: '手机号',
					value: '',
				}, ],
				imageValue: [],
				formData: {
					name: '',
					goods_description: '',
					tags: '',
					price: 0,
					address: '',
					call_way: '',
				},
				address: [],
				tagTemp: '',
				tags: [],
				changeImage:false,
			}
		},
		onLoad(e){
			var id = e.id;
			// var id = 6;
			
			findGoodsById(id).then(res=>{
				if(res?.result_code=="0"){
					this.formData.id = res.data.id;
					this.formData.name = res.data.name;
					this.formData.goods_description = res.data.goods_description;
					this.formData.tags = res.data.tags;
					this.formData.price = res.data.price;
					this.formData.address = res.data.address;
					this.formData.call_way = res.data.call_way;
					this.formData.image = res.data.image;
					
					this.address = this.formData.address.split("/");
					this.address[0] = this.address[0].substr(0,this.address[0].length-1)
					this.address[1] = this.address[1].substr(0,this.address[1].length-1)
					this.address[2] = this.address[2].substr(0,this.address[2].length-1)
					
					this.tags = this.formData.tags.split(",");
					this.call_ways = JSON.parse(this.formData.call_way)
					
					var images = JSON.parse(this.formData.image);
					// this.formData.image = images;
					for(var index in images){
						var img = images[index];
						var url = showImage(img.path+img.name);
						var image_info = {
							url: url,
							extname: 'png',
							name: img.name
						}
						this.imageValue.push(image_info);
					}
				}
			})
		},
		methods: {
			deleteTag(index) {
				this.tags.splice(index, 1)
			},
			addTag() {
				if (this.tagTemp) {
					this.tagTemp = this.tagTemp.replaceAll("，", ",");

					var tags = this.tagTemp.split(",");
					for (var i = 0; i < tags.length; i++) {
						if (this.tags.length >= 5) {
							uni.showModal({
								content: "最多不能超过5个种类",
								showCancel: false
							})
							return;
						}

						if (tags[i]) {
							this.tags.push(tags[i]);
						}
					}
					this.tagTemp = '';
				}
			},
			testAddForm() {//测试使用
				this.call_ways = [{
					way: '邮箱',
					value: 'lw18738173@163.com',
				}, {
					way: 'QQ',
					value: '12343434',
				}, {
					way: '微信',
					value: 'qsi342432343',
				}, {
					way: '手机号',
					value: '8791749232',
				}, ]
				this.address = ["江苏","南京","雨花","赛虹桥街道菊花小区"]
				this.formData = {
					name: 'name',
					goods_description: '描述',
					tags: '洗衣机,多功能',
					price: 10,
					address: '',
					call_way: JSON.stringify(this.call_ways),
				}
			},
			resetData() {
				this.formData = {
					name: '',
					goods_description: '',
					tags: '',
					price: 0,
					address: '',
					call_way: '',
				}
				this.tags = [];
				this.address = [];
				this.imageValue = [];
				this.call_ways = [{
					way: '邮箱',
					value: '',
				}, {
					way: 'QQ',
					value: '',
				}, {
					way: '微信',
					value: '',
				}, {
					way: '手机号',
					value: '',
				}, ]
			},
			submitGoodsInfo() {
				// this.testAddForm()
				
				var ths = this;
				//拼接省市区地址
				this.formData.address = this.address[0] + "省/" + this.address[1] + "市/" + this.address[2] + "区/" + this.address[3];
				//处理tags
				this.formData.tags = '';
				for (var i = 0; i < this.tags.length; i++) {
					this.formData.tags += this.tags[i];
					if (i < this.tags.length - 1) {
						this.formData.tags += ",";
					}
				}

				//处理cay_way
				this.formData.call_way = JSON.stringify(this.call_ways)

				var images = JSON.parse(this.formData.image);
				let imgs = this.$refs.files.files.map((value, index) => {
					return {
						name: value.name,
						uri: value.url
					}
				});
				if(!this.changeImage){
					this.formData.changeImage = false;
				}else{
					this.formData.changeImage = true;
				}
				
				if(!this.checkFormAndImg()){
					return;
				}
				
				updateGoodsInfo(this.formData, imgs).then(res => {
					if(res?.result_code=="0"){
						this.resetData();
					}
				});
			},
			// 获取上传状态
			selectFile(e) {
				this.changeImage = true;
				this.$refs.files.files.forEach((item, index) => {
					if (item.size > 5120000) {
						this.$refs.files.clearFiles(index)
						uni.showModal({
							content:"图片最大5M"
						})
					}
				})
			},
			deleteFile(e) {
			},
			checkFormAndImg(){
				var passCheck = true;
				if(!this.formData.name){
					this.showCheckModal("商品名称不能为空")
					passCheck = false;
				}else if(!this.formData.address){
					this.showCheckModal("商品地址不能为空")
					passCheck = false;
				}else if(this.$refs.files.files.length==0){
					this.showCheckModal("图片必上传一个")
					passCheck = false;
				}
				else{
					var callWayHas = false;
					for(var index in this.call_ways){
						var call_way = this.call_ways[index];
						if(call_way.value){
							callWayHas = true;
							break;
						}
					}
					if(!callWayHas){
						this.showCheckModal("联系方式必填一个")
						passCheck = false;
					}
				}
				return passCheck;
			},
			showCheckModal(msg){
				uni.showModal({
					showCancel:false,
					content:msg
				})
			}
		},
	}
</script>

<style scoped lang="less">
	.container {
		padding-bottom: 40rpx;
	}

	.goods {
		padding: 20rpx;

		input {
			border: 1px solid lightblue;
			border-radius: 8px;
			padding: 10rpx;
			width: 80%;
		}

		textarea {
			// border: 1px solid lightblue;
			height: 200px;

			border-radius: 8px;
			padding: 10rpx;
		}

		label {
			width: 80px;
			// border: 1px solid lightblue;
		}

		.name,
		.description,
		.tags,
		.price,
		.address,
		.call_way_in {
			display: flex;
			// width: 100%;
			// border: 1px solid red;
			margin-top: 20rpx;
			align-items: center;
		}

		.address {
			align-items: flex-start;
			flex-direction: column;


			input {
				width: 100%;
			}
		}

		.description {
			align-items: flex-start;
		}

		.call_way {
			margin-top: 40rpx;
		}

		.chooseImageView {
			margin-top: 20rpx;
		}
	}
</style>